<template>
  <div class="New_team_buttom">
    <el-form ref="form" :model="form" label-width="200px">
      <el-form-item label="团队名称:">
        <el-input v-model="form.teamName"></el-input>
      </el-form-item>

      <el-form-item label="项目名称:">
        <el-input v-model="form.projectName"></el-input>
      </el-form-item>

      <el-form-item label="团队Logo:" style="height: 150px">
        <el-upload
          accept=".jpg,.jpeg,.png"
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :on-change="changeHandle"
          :auto-upload="false"
        >
          <img
            v-if="imgURL"
            :src="imgURL"
            class="avatarimg"
            style="width: 15rem"
          />

          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <p slot="tip" class="el-upload__tip" style="color: #909399">
            建议750*420，小于300kb，支持JPG、PNG格式
          </p>
        </el-upload>
      </el-form-item>

      <el-form-item label="团队简介:" class="Large_text_box">
        <el-input type="textarea" v-model="form.teamDescription"></el-input>
      </el-form-item>

      <el-form-item label="项目简介:" class="Large_text_box">
        <el-input type="textarea" v-model="form.projectDescription"></el-input>
      </el-form-item>
      <el-form-item label="行业类别:">
        <el-select
          class="job_select"
          v-model="form.industryId"
          clearable
          placeholder="选择行业类别"
        >
          <el-option
            v-for="item in job"
            :key="item.id"
            :label="item.industryName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="团队风采:" style="height: 150px">
        <el-upload
          accept=".jpg,.jpeg,.png"
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :on-change="changeHandle1"
          :auto-upload="false"
        >
          <img
            v-if="imgURL1"
            :src="imgURL1"
            class="avatarimg"
            style="width: 15rem"
          />

          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <p slot="tip" class="el-upload__tip" style="color: #909399">
            建议750*420，小于300kb，支持JPG、PNG格式
          </p>
        </el-upload>
      </el-form-item>

      <div class="New_team_Submit">
        <el-button type="button" @click="onSubmit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";

export default {
  props: {},
  components: {},
  data() {
    return {
      job: "",
      form: {
        teamName: "",
        projectName: "",
        avatarUrl: "",
        teamDescription: "",
        projectDescription: "",
        industryId: "",
        teamPhotoUrl: "",
      },
      imgFile: "",
      // 图片文件名称
      fileName: "",
      // 显示图片的地址
      imgURL: "",
      imgFile1: "",
      // 图片文件名称
      fileName1: "",
      // 显示图片的地址
      imgURL1: "",
    };
  },
  methods: {
    //申请物品

    changeHandle(file) {
      this.imgURL = URL.createObjectURL(file.raw);

      this.imgFile = file;
      this.fileName = file.name;
    },

    changeHandle1(file) {
      this.imgURL1 = URL.createObjectURL(file.raw);

      this.imgFile1 = file;
      this.fileName1 = file.name;
    },

    async uploadImg() {
      // 创建COS实例  获取签名
      //这里写你们后端提供的请求接口即可，这里调用的接口是为了获取tmpSecretId、tmpSecretKey、sessionToken、expiredTime这些值
      const { data: res1 } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/upload/getSecretKey",
      });

      const data = res1.credentials;
      const cos = new COS({
        // 必选参数
        getAuthorization: (options, callback) => {
          const obj = {
            TmpSecretId: data.tmpSecretId,
            TmpSecretKey: data.tmpSecretKey,
            XCosSecurityToken: data.sessionToken,
            StartTime: res1.startTime, // 时间戳，单位秒，如：1580000000
            ExpiredTime: res1.expiredTime, // 时间戳，单位秒，如：1580000900
          };
          callback(obj);
        },
      });

      // 上传图片  其中Bucket 和 Region找你们负责人拿，Bucke和Region是由公司负责人使用公司账户，登入腾讯云，获取回来的。
      //key 在前面加上路径写法可以生成文件夹
      cos.putObject(
        {
          Bucket: "fuhuaqi-1311373154" /* 必须 */,
          Region: "ap-guangzhou" /* 存储桶所在地域，必须字段 */,
          Key: "/Team/" + new Date().getTime() + this.fileName /* 必须 */,
          StorageClass: "STANDARD",
          Body: this.imgFile.raw, // 上传文件对象
          onProgress: (progressData) => {
            // this.percent = progressData.percent * 100;
            // console.log(this.percent);
          },
        },
        (err, data) => {
          // 将上传后的封面进行路径拼接保存到本地

          const url = "https://" + data.Location;
          console.log(url);
          this.form.avatarUrl = url;
        }
      );

      cos.putObject(
        {
          Bucket: "fuhuaqi-1311373154" /* 必须 */,
          Region: "ap-guangzhou" /* 存储桶所在地域，必须字段 */,
          Key: "/Team/" + new Date().getTime() + this.fileName1 /* 必须 */,
          StorageClass: "STANDARD",
          Body: this.imgFile1.raw, // 上传文件对象
          onProgress: (progressData) => {
            // console.log(this.percent);
          },
        },
        (err, data) => {
          // 将上传后的封面进行路径拼接保存到本地

          const url = "https://" + data.Location;
          console.log(url);
          this.form.teamPhotoUrl = url;
        }
      );
    },

    //提交表单
    async onSubmit() {
      this.uploadImg();
      if (this.form.avatarUrl != null && this.form.teamPhotoUrl != null) {
        const self = this;

        const { data: res } = await this.$http({
          headers: { "Content-Type": "application/json;charset=UTF-8" },
          method: "post",
          url: "/api/team/addTeam",
          data: self.form,
        });
        console.log(res);
      }
      if (res.code != 200) {
        this.$message.error("提交失败");
      } else {
        this.$message(res.msg);
      }
      for (let i in this.form) {
        this.form[i] = "";
      }
      this.imgURL = "";
      this.imgURL1 = "";

    },
  },
  async created() {
    const { data: res } = await this.$http({
      headers: { "Content-Type": "application/json;charset=UTF-8" },
      method: "get",
      url: "/api/team/getIndustryType",
    });
    console.log(res);
    this.job = res.msg;
  },
};
</script>

<style lang="less">
.New_team_buttom {
  margin: 5px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.04);
  height: 98%;
  width: 98%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  .el-form {
    display: flex;
    flex-direction: column;
    height: 90%;
    // width: 50%;
    margin: auto;
    margin-top: 10px;
    .el-form-item {
      display: flex;
      flex-direction: row;
      height: 90px;
      .el-input {
        width: 600px;

        .el-input__inner {
          height: 40px;
          font-size: 19px;
        }
      }
      .el-form-item__label {
        font-size: 20px;

        font-weight: bold;
      }
      .el-form-item__content {
        width: 60%;
      }
    }
  }
}
.Remaining_Items {
  color: rgb(170, 170, 170);
  margin-left: 50px;
}
.New_team_Submit {
  height: 50px;
  width: auto;
  display: flex;
  // margin-top: 50px;
  margin: 0px auto;
  button {
    width: 200px;
    border: none;
    height: 50px;
    margin-top: 20px;
  }
  button:nth-child(1) {
    background-color: rgb(0, 110, 255);
    font-size: 20px;
    color: white;
    font-weight: bolder;
    border-radius: 5%;
  }
  button:nth-child(2) {
    background-color: rgb(242, 242, 242);
    margin-left: 150px;
    color: black;
    border-radius: 5%;
    font-weight: bolder;
    font-size: 20px;
  }
}

.residue {
  margin-left: 150px;
  color: grey;
}
.Large_text_box {
  display: flex;
  flex-direction: row;
  height: 600px !important;
  margin: 10px 0px !important;
  .el-textarea__inner {
    display: flex;
    width: 600px;
    font-size: 25px;
    height: 100px;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  // width: 15rem;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}
.avatarimg {
  width: 110px !important;
  height: 110px;
  // display: block;
}

.New_team_buttom::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #fff;
}
.New_team_buttom::-webkit-scrollbar {
  width: 6px;
}

.New_team_buttom:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
</style>